<template>
  <div>
    <!-- 整改单统计 -- 各部门可见 -->
    <div class="title">
      <span>质量告知书</span>
    </div>
    <div class="shadow quality-part m15 p20">
      <div class="column-box">
        <div class="column">
          <div class="num">{{dataList.monthTotal}}</div>
          <div class="label">本月总数</div>
        </div>
        <div class="column">
          <div class="num">{{dataList.monthScoreTotal}}</div>
          <div class="label">本月扣分</div>
        </div>
        <div class="column">
          <div class="num">{{dataList.monthNoResTotal}}</div>
          <div class="label">未响应</div>
        </div>
        <div class="column">
          <div class="num">{{dataList.monthNoHandleTotal}}</div>
          <div class="label">未处置</div>
        </div>
      </div>

      <div class="column-box">
        <div class="column-item" v-for="(item,index) in dataList.list" :key="index">
          <div class="name">{{item.name || '部门考核告知书'}}</div>
          <div class="f-box">
            <div class="row">
              <span class="label">未响应</span>
              <span class="num">{{item.noRes}}</span>
            </div>
            <div class="row">
              <span class="label">未处置</span>
              <span class="num">{{item.noHandle}}</span>
            </div>
          </div>
        </div>
        <!-- <div class="column-item">
          <div class="name">部门违纪告知书</div>
          <div class="f-box">
            <div class="row">
              <span class="label">未响应</span>
              <span class="num">480</span>
            </div>
            <div class="row">
              <span class="label">未处置</span>
              <span class="num">480</span>
            </div>
          </div>
        </div>
        <div class="column-item">
          <div class="name">安全检查整改通知单</div>
          <div class="f-box">
            <div class="row">
              <span class="label">未响应</span>
              <span class="num">480</span>
            </div>
            <div class="row">
              <span class="label">未处置</span>
              <span class="num">480</span>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import {getLetterCount} from '@/api/home'
export default {
  data() {
    return {
      dataList: {}
    }
  },
  mounted() {
    this.getLetterCount()
  },
  methods: {
    async getLetterCount() {
      try {
        const res = await getLetterCount()
        this.dataList = res.data||{}
      } catch (error) {

      }
    }
  }
}
</script>
<style lang="scss" scoped>
.quality-part {
  .column-item {
    flex: 1;
    margin-left: 14px;
    &:first-child {
      margin-left: 0;
    }
    .name {
      font-size: 15px;
      padding-left: 10px;
      border-left: 2px solid rgba(255, 188, 62, 1);
      line-height: 1;
      margin: 25px 0 10px;
    }
    .f-box {
      background: rgba(183, 192, 223, 0.10);
      padding: 12px;
      border-radius: 8px;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:last-child {
          margin-bottom: 0;
        }
        .num {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
